<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <ui:composition template="/plantillas/plantillaPrincipal.xhtml">
        <ui:define name="contenido">
            <f:view>
                <h:form id="formNuevoCliente">
                    <h:panelGrid columns="1" style="width:650px;margin: 0px auto;">
                        <p:commandButton id="btnNuevoCliente" action="#{MBCliente.nuevo()}" value="AGREGAR CLIENTE" ajax="false"/>
                    </h:panelGrid>	
                </h:form>
                <h:form id="formBuquedaCliente">
                    <p:panel id="pnlBusquedaCliente" header="#{message['cliente.busqueda.panel.busqueda.titulo']}" style="width:650px;margin: 5px auto" 
                             toggleable="true" collapsed="#{BKCliente.listaClientesActivos ne null}" widgetVar="buscar">
                        <p:panelGrid>
                            <p:row>
                                <p:column>
                                    <h:outputText id="lblRucBuscar" value="#{message['cliente.busqueda.panel.busqueda.ruc']}: " class="lblBusqueda" /> 
                                </p:column>
                                <p:column>
                                    <p:inputText id="txtRucBuscar" value="#{BKCliente.clienteBusqueda.numeroDocumento}" />
                                </p:column>
                                <p:column>
                                    <h:outputText id="lblTipoCliente" value="TIPO:  " class="lblBusqueda" />
                                </p:column>
                                <p:column>
                                    <p:selectOneMenu id="cbxTipoCliente" style="width: 140px"
                                                     value="#{BKCliente.clienteBusqueda.tipoCliente}"> 
                                        <f:selectItem itemLabel="Seleccionar" itemValue="0" /> 
                                        <f:selectItem itemLabel="LOCAL" itemValue="1"/>	
                                        <f:selectItem itemLabel="EXTRANJERO" itemValue="2"/>
                                    </p:selectOneMenu>
                                </p:column>
                            </p:row>

                            <p:row>
                                <p:column>
                                    <h:outputText id="lblNombreComercialBusqueda" value="#{message['cliente.busqueda.panel.busqueda.nombreComercial']}: " class="lblBusqueda" />
                                </p:column>
                                <p:column colspan="3">
                                    <p:inputText onkeyup="cambiarMayuscula(this)" id="txtNombreComercialBusqueda" value="#{BKCliente.clienteBusqueda.nombreComercial}" 
                                                 style="width: 100%"/> 
                                </p:column>
                            </p:row>

                            <p:row>
                                <p:column>
                                    <h:outputText id="lblRazonSocialBusqueda" value="#{message['cliente.busqueda.panel.busqueda.razonSocial']}: " class="lblBusqueda" />
                                </p:column>
                                <p:column colspan="3">
                                    <p:inputText onkeyup="cambiarMayuscula(this)" id="txtRazonSocialBusqueda" value="#{BKCliente.clienteBusqueda.razonSocial}" 
                                                 style="width: 100%"/> 
                                </p:column>
                            </p:row>
                            <p:row>
                                <p:column>
                                    <p:commandButton id="btnBuscarCliente" value="#{message['general.button.buscar.filtro']}" update="dataTablaCliente"  
                                             actionListener="#{MBCliente.buscarListaClientes}"
                                             oncomplete="listaCliente.show();buscar.toggle()" style="font-size:12px"/>
                                </p:column>
                            </p:row>

                        </p:panelGrid>

                    </p:panel>
                    <p:panel id="pnlListaClientes" header="#{message['cliente.busqueda.panel.resultado.titulo']}" closable="true" style="width: 80%;margin: 10px auto" 
                             visible="#{(BKCliente.listaClientesActivos eq null)?false:true}" widgetVar="listaCliente" >

                        <p:dataTable id="dataTablaCliente" var="cliente" value="#{BKCliente.listaClientesActivos}" styleClass="datable-busqueda"
                                     emptyMessage="No se encontraron clientes" paginator="true" rows="20" rowIndexVar="rowIndex" style="width:100%"
                                     paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink}  
                                     {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" scrollHeight="250" paginatorPosition="bottom"    
                                     rowsPerPageTemplate="20,40,60" sortOrder="ascending" sortBy="#{cliente.razonSocial}" scrollable="true"> 

                            <f:facet name="header" >
                                <p:outputPanel layout="block" >
                                    <h:commandButton value="Exportar EXCEL">  
                                        <p:dataExporter type="xls" target="dataTablaCliente" fileName="clientes" />  
                                    </h:commandButton>  

                                    <h:commandButton value="Exportar PDF">  
                                        <p:dataExporter type="pdf" target="dataTablaCliente" fileName="clientes"/>  
                                    </h:commandButton>
                                </p:outputPanel>

                            </f:facet>

                            <p:column id="idColumnaNum" headerText="Num." style="width: 5%"> 
                                <h:outputText value="#{rowIndex+1}" /> 
                            </p:column>

                            <p:column id="idColumnaRuc" sortBy="#{cliente.numeroDocumento}" style="width: 15%"> 
                                <f:facet name="header">  
                                    <h:outputText value="#{message['cliente.busqueda.panel.resultado.columna.ruc']}" />  
                                </f:facet>
                                <h:outputText value="#{cliente.numeroDocumento}" /> 
                            </p:column>

                            <p:column id="idColumnaNombreComercial" sortBy="#{cliente.nombreComercial}" style="width: 20%"	>  
                                <f:facet name="header">  
                                    <h:outputText value="#{message['cliente.busqueda.panel.resultado.columna.nombreComercial']}" />  
                                </f:facet>
                                <h:outputText value="#{cliente.nombreComercial}" /> 
                            </p:column>

                            <p:column id="idColumnaRazonSocial" sortBy="#{cliente.razonSocial}" style="width: 30%"> 
                                <f:facet name="header">  
                                    <h:outputText value="#{message['cliente.busqueda.panel.resultado.columna.razonSocial']}" />  
                                </f:facet>
                                <h:outputText value="#{cliente.razonSocial}" /> 
                            </p:column>

                            <p:column id="idColumnaCodigo" sortBy="#{cliente.codigoCliente}" style="width: 5%"> 
                                <f:facet name="header">  
                                    <h:outputText value="Codigo" />  
                                </f:facet>
                                <h:outputText value="#{cliente.codigoCliente}" /> 
                            </p:column>

                            <p:column id="idColumnaTipo" sortBy="#{cliente.tipoCliente}" style="width: 10%"> 
                                <f:facet name="header">  
                                    <h:outputText value="Tipo" />  
                                </f:facet>
                                <h:outputText value="#{cliente.tipoCliente eq 50 or cliente.tipoCliente eq '2' ?'EXTRANJERO':'LOCAL'}"/>

                            </p:column>

                            <p:column id="idAccionesCliente" headerText="#{message['general.label.tipoAcesso']}" exportable="false" style="width: 15%">
                                <p:commandButton icon="ui-icon-search" title="#{message['general.button.ver']}" action="#{MBCliente.ver()}" immediate="true" ajax="false">
                                    <f:setPropertyActionListener value="#{cliente}" target="#{BKCliente.clienteFormulario}" />  
                                </p:commandButton>
                                <p:commandButton icon="ui-icon-pencil" title="#{message['general.button.editar']}" action="#{MBCliente.editar()}" immediate="true" ajax="false">
                                    <f:setPropertyActionListener value="#{cliente}" target="#{BKCliente.clienteFormulario}" />  
                                </p:commandButton>  
                                <p:commandButton id="btnEliminarCliente" title="#{message['general.button.eliminar']}" icon="ui-icon-trash"  oncomplete="confirmacion.show()">
                                    <f:setPropertyActionListener value="#{cliente}" target="#{BKCliente.clienteSeleccionado}" />
                                </p:commandButton>
                            </p:column>

                        </p:dataTable>
                    </p:panel> 
                    <p:confirmDialog id="dlgEliminarCliente" message="#{message['dialog.confirmacion.mensaje']}" 
                                     header="#{message['dialog.confirmacion.header']}" severity="alert" widgetVar="confirmacion">
                        <h:panelGrid style="width: auto;margin:0px auto;border:0px;padding: 0 5px" columns="2">
                            <p:commandButton id="btnConfEliCliente" update="dataTablaCliente" value="#{message['general.button.si']}"  oncomplete="confirmacion.hide()"  
                                             actionListener="#{MBCliente.eliminar}" style="text-align: center"/>  
                            <p:commandButton id="btnCancEliCliente" value="#{message['general.button.no']}" onclick="confirmacion.hide()" type="button" style="text-align: center" />   
                        </h:panelGrid>
                    </p:confirmDialog>	 
                </h:form>
            </f:view>
        </ui:define>
    </ui:composition>
</html>   